<template>
  <div class="home-page">
    <el-row>
      <el-col :span="12">
        <div class="" style="margin: 10px; display: inline-block">
          <el-button size="medium" :autofocus="true" @click="filterFormDataByType(viewAll)">View All</el-button>
          <!--<el-button size="medium" @click="filterFormDataByType(viewHKCTRApproved)">View HKCTR(Approved)</el-button>-->
          <!--<el-button size="medium" @click="filterFormDataByType(viewHKCTROutstanding)">View HKCTR(Outstanding)</el-button>-->
          <el-button size="medium" @click="filterFormDataByType(viewMyConcernPCRS)">View My Concern PCRS</el-button>
          <!--<el-button size="medium" @click="filterFormDataByType(viewPPA)">View PPA</el-button>-->
        </div>
      </el-col>
      <el-col :span="12">
        <el-menu :default-active="'temp'" class="el-menu-demo" mode="horizontal" @select="handleSelect">
          <template v-for="toolItem in toolItems">
            <el-submenu class="menu-item" style="float: right" :key="toolItem.index" v-if="toolItem.subItems" :index="toolItem.index">
              <template slot="title">{{toolItem.title}}</template>
              <template v-for="subItem in toolItem.subItems">
                <el-menu-item :key="subItem.index" :index="subItem.index">{{subItem.title}}</el-menu-item>
              </template>
            </el-submenu>
            <el-menu-item v-if="!(toolItem.subItems)" :key="toolItem.index" :index="toolItem.index">{{toolItem.title}}
            </el-menu-item>
          </template>
          <el-menu-item :disabled="true" class="time-zone" index="'100'">
            <div class="time-wrapper">
              <div class="time-title">
                HONG KONG
              </div>
              <div class="clock-box">
                <i class="el-icon-time"></i>
                <span>{{timeForHongKong}}</span>
              </div>
            </div>
            <div class="time-wrapper">
              <div class="time-title">
                London
              </div>
              <div class="clock-box">
                <i class="el-icon-time"></i>
                <span>{{timeForLondon}}</span>
              </div>
            </div>
            <div class="time-wrapper">
              <div class="time-title">
                San Ramon
              </div>
              <div class="clock-box">
                <i class="el-icon-time"></i>
                <span>{{timeForSanRamon}}</span>
              </div>
            </div>
          </el-menu-item>
        </el-menu>
      </el-col>
    </el-row>

    <el-row class="view-panel">
      <!--<div>-->
      <!--<collapase-panel ref="panel" @collapaseChange="onCollapaseChange">-->
      <!--<div slot="content">-->
      <!--<el-button type="primary" plain @click="collapse">trigger</el-button>-->
      <!--</div>-->
      <!--</collapase-panel>-->
      <!--</div>-->
      <div class="main-list" :class="[!collapsed?'collapsed':'']">
        <div class="view-button-list">
          <el-container>
            <el-header height="10" class="form-list-header">
              <div class="filter-type-header">{{ currentFilterType }}</div>
            </el-header>
            <el-main style="padding: 0">
              <request-form-table></request-form-table>
            </el-main>
          </el-container>
        </div>
      </div>
    </el-row>
  </div>
</template>

<script>
import constants from '@/common/js/constants'
import Bus from '@/common/js/eventBus'
import CollapasePanel from './sub-view/CollapasePanel'
import RequestFormTable from './sub-view/RequestFormTable'
import moment from 'moment'

export default {
  name: 'HomePage',
  components: {
    RequestFormTable,
    CollapasePanel
  },
  data() {
    return {
      isLoading: false,
      collapsed: true,
      toolItems: [
        {
          title: 'PCRS Operate',
          index: 'pcrsOperate',
          subItems: [
            {
              title: 'New Submission',
              index: 'newSubmission'
            },
            {
              title: 'Create PCRS From Old PCRS',
              index: 'createPCRSFromOldPCRS'
            },
            {
              title: 'View My Concern PCRS',
              index: 'viewMyConcernPCRS'
            }
          ]
        },
        {
          title: 'Maintenance',
          index: 'maintenance',
          subItems: [
            {
              title: 'TempUser List',
              index: 'tempUserList'
            },
            {
              title: 'Team Endorser List',
              index: 'teamEndorserList'
            },
            {
              title: 'Email Template',
              index: 'emailTemplateList'
            },
            {
              title: 'Role Authorization',
              index: 'roleAuthorization'
            },
            {
              title: 'Function Authorization',
              index: 'functionAuthorization'
            }
          ]
        }
      ],
      value2: new Date(2016, 9, 10, 18, 40),
      currentFilterType: 'View All',
      viewAll: '',
      viewHKCTRApproved: '',
      viewHKCTROutstanding: '',
      viewMyConcernPCRS: '',
      viewPPA: '',
      timeForHongKong: moment().utcOffset(1).format('HH:mm:ss'),
      timeForLondon: moment().utcOffset(8).format('HH:mm:ss'),
      timeForSanRamon: moment().utcOffset(-7).format('HH:mm:ss')
    }
  },
  created() {
    let $this = this
    setInterval(() => {
      $this.timeForLondon = moment().utcOffset(1).format('HH:mm:ss')
      $this.timeForHongKong = moment().utcOffset(8).format('HH:mm:ss')
      $this.timeForSanRamon = moment().utcOffset(-7).format('HH:mm:ss')
    }, 1000)
    this.viewAll = constants.REQUEST_FORM_TYPE.VIEW_ALL
    this.viewHKCTRApproved = constants.REQUEST_FORM_TYPE.VIEW_HKCTR_APPROVED
    this.viewHKCTROutstanding = constants.REQUEST_FORM_TYPE.VIEW_HKCTR_OUTSTANDING
    this.viewMyConcernPCRS = constants.REQUEST_FORM_TYPE.VIEW_MY_CONCERN_PCRS
    this.viewPPA = constants.REQUEST_FORM_TYPE.VIEW_PPA
  },
  methods: {
    onCollapaseChange(isCollapased) {
      this.collapsed = isCollapased
    },
    handleSelect(index, indexPath) {
      let routePath = {
        'newSubmission': '/changeRequestForm',
        'tempUserList': '/tempUserList',
        'teamEndorserList': '/teamEndorserList',
        'emailTemplateList': '/emailTemplateList',
        'roleAuthorization': '/roleAuthorization',
        'functionAuthorization': '/functionListAuthorization'
      }
      if (routePath[index]) {
        let routeData = this.$router.resolve({path: routePath[index]})
        window.open(routeData.href, '_blank')
      }
    },
    collapse() {
      this.$refs['panel'].trigger()
    },
    filterFormDataByType(type) {
      this.currentFilterType = type
      Bus.$emit('reloadRequestFormListByCondition', type)
    }
  }
}
</script>

<style scoped lang="scss">
  @import '../../common/css/base';

  .home-page {
    height: 100%;
    margin: 10px 0;
  }

  .form-list-header {
    padding-left: 10px;
    padding-right: 10px;
    background-color: $base-header-color;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }

  .titleClass {
    display: inline-block;
    width: 103px;
    font-size: 10px;
    text-align: left;
  }

  .home-page-title {
    color: $base-header-color;
  }

  .testClass {
    width: 400px;
    background-color: red;
  }

  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 230px;
    min-height: 400px;
  }

  .time-item {
    width: 120px;
    height: 32px;
  }

  .time-wrapper {
    display: inline-block;
    line-height: 20px;
    height: 61px;
  }

  .time-title {
    text-align: center;
    height: 20px;
  }

  .home-page .time-zone {
    float: right;
    opacity: 1;
  }

  .time-zone.el-menu-item.is-disabled {
    cursor: initial;
  }

  .view-panel {
    display: flex;
    height: 100%;
    border-top: 1px solid #e6e6e6;
  }

  .main-list {
    width: 100%;
    float: left;
    padding: 10px;
  }

  .main-list.collapsed {
    width: 84%;
    transform-origin: right center;
    transition: ease-out 0.5s;
  }

  .view-button-list {
    overflow: auto;
  }

  .filter-type-header {
    font-weight: bold;
    padding-top: 10px;
    padding-bottom: 5px;
    color: #fff;
  }

  .el-menu--horizontal {
    border-bottom: none;
  }

  .clock-box {
    border: 1px solid;
    padding: 3px 12px 3px 3px;
    border-radius: 4px;
    width: 100px;
  }

  .el-menu-item [class^=el-icon-] {
    margin-right: 0;
    font-size: 14px;
  }

  .el-button--medium {
    font-weight: bold;
  }

  .menu-item {
    font-weight: bold;
  }

  /*.test_img {*/
  /*background-image: url('./../assets/logo.png');*/
  /*width: 100px;*/
  /*height: 200px;*/
  /*}*/
</style>
